<template>
  <!-- 视频 -->
  <div class="pc">
    <div class="video-frame">
      <div class="bg-box">
        <img class="bg" src="../../../assets/image/product/p-video-bg.png" />
      </div>
      <img class="cancel" src="../../../assets/image/about/ic-cancel.png" @click="cancel" />
      <div class="video-box">
        <div class="video-title">{{ title }}</div>

        <video class="left" v-if="currentVideo" :key="currentVideo.id" :poster="currentVideo.webimages" controls>
          <source :src="currentVideo.videofile" type="video/mp4" />
        </video>

        <div class="right">
          <img class="item" v-for="(item, index) in video.list" :key="index" :src="item.webimages"
            @click="video.index = index" />
        </div>
      </div>
    </div>
  </div>
  <div class="mobile">
    <div class="video-frame">
      <div class="bg-box">
        <img class="bg" src="../../../assets/image/product/m-video-bg.png" />
      </div>
      <img class="cancel" src="../../../assets/image/about/ic-cancel.png" @click="cancel" />
      <div class="video-box">

        <video class="left" v-if="currentVideo" :key="currentVideo.id" :poster="currentVideo.webimages" controls>
          <source :src="currentVideo.videofile" type="video/mp4" />
        </video>

        <app-scrollbar class="right">
          <!-- <div class="right"> -->
          <div class="scrollbar">


            <img class="item-img" v-for="(item, index) in video.list" :key="index" :src="item.webimages"
              @click="video.index = index" />
          </div>
          <!-- </div> -->
        </app-scrollbar>

        <!-- <div class="right">
        <img
          class="item-img"
          v-for="(item, index) in video.list"
          :key="index"
          :src="item.webimages"
          @click="video.index = index"
        />
      </div> -->
        <div class="video-title">{{ title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: { data: Number },
  data() {
    return {
      video: {
        list: [],
        index: 0,
      },
    };
  },

  computed: {
    currentVideo() {
      return this.video.list[this.video.index];
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const result = await this.$request.get("/companyinno/middleVideo", {
          params: {
            cid: this.data,
            page: 1,
            pagenum: 100,
          },
        });
        this.video.list = result.data.video;
        this.title = result.data.nav.name;
        // this.video.list = this.video.list.concat(result.data);
        // this.video.list = this.video.list.concat(result.data);
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .mobile {
    display: none;
  }

  .pc {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.8);

    display: flex;
    justify-content: center;
    align-items: center;

    .video-frame {
      box-sizing: border-box;

      border-radius: 6px;
      width: 1260px;
      background: #fff;
      position: relative;
      display: flex;
      justify-content: center;

      .cancel {
        cursor: pointer;
        z-index: 99;
        position: absolute;

        right: 2px;
        width: 36px;
        height: 36px;
      }

      .bg-box {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;

        .bg {
          width: 1260px;
          height: 120px;
        }
      }

      .video-box {
        overflow: hidden;
        position: relative;
        width: fit-content;
        height: 610px;
        width: 1164px;
        margin: 100px 0px 50px 0px;
        background: #ffffff;
        box-shadow: 0px 12px 35px 0px rgba(192, 98, 2, 0.15);
        border-radius: 6px;

        display: flex;

        .video-title {
          @include fn.title();
          position: absolute;
          left: 0px;
          bottom: 20px;
          display: flex;
          justify-content: center;
          width: 100%;
        }

        .left {
          margin-top: 47px;
          margin-bottom: 49px;
          margin-left: 54px;
          @include fn.scale(873px);
        }

        .right {
          // overflow-y: overlay;
          display: flex;
          flex-direction: column;
          //  gap: 16px;
          margin-top: 49px;
          // margin-bottom: 49px;
          margin-left: 15px;
          // width: 214px;
          height: 491px;
          // flex: 1;
          padding-right: 20px;
          overflow-x: hidden;
          overflow-y: scroll;
          @include fn.scroll();


          .item:first-child {
            margin-top: 0;
          }

          .item {
            flex-shrink: 0;
            object-fit: cover;
            box-sizing: border-box;
            margin-top: 17px;
            width: 196px;
            height: 110px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .pc {
    display: none;
  }

  .mobile {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;

    .video-frame {
      box-sizing: border-box;

      border-radius: fn.rpx(6);
      width: 100%;
      background: #fff;
      position: relative;
      display: flex;
      justify-content: center;



      .cancel {
        cursor: pointer;
        z-index: 99;
        position: absolute;
        top: fn.rpx(2);
        right: fn.rpx(2);
        width: fn.rpx(36);
        height: fn.rpx(36);
      }

      .bg-box {
        position: absolute;
        top: fn.rpx(30);
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;

        .bg {
          width: fn.rpx(710);
          height: fn.rpx(37);
        }
      }

      .video-box {
        overflow: hidden;
        position: relative;
        margin-bottom: fn.rpx(20);
        width: fn.rpx(700);
        height: fn.rpx(570);
        margin-top: fn.rpx(52);
        background: #ffffff;
        box-shadow: 0px 12px 35px 0px rgba(192, 98, 2, 0.15);
        border-radius: fn.rpx(6);
        display: flex;
        flex-direction: column;
        align-items: center;

        .video-title {
          @include fn.title();
          position: absolute;
          left: 0px;
          bottom: fn.rpx(10);
          display: flex;
          justify-content: center;
          width: 100%;
        }


        .left {
          margin-top: fn.rpx(49);
          margin-bottom: fn.rpx(20);
          object-fit: cover;
          width: fn.rpx(630);
          height: fn.rpx(354.3);
        }

        .right {
          // overflow: hidden;
          width: fn.rpx(630);
          // overflow-x: overlay;
          // overflow-y: hidden;
          display: flex;
          //  gap: fn.rpx(16);
          //  margin-top: fn.rpx(17);
          margin-bottom: fn.rpx(20);
          // width: 214px;
          height: fn.rpx(100);
          padding-bottom: fn.rpx(10);

          // flex: 1;
          .scrollbar {
            display: flex;

          }

          /*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
          &::-webkit-scrollbar {
            width: fn.rpx(3);
            height: fn.rpx(3);
            background-color: #f5f5f5;
          }

          /*定义滚动条轨道
 内阴影+圆角*/
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 fn.rpx(3) #f5f5f5;
            border-radius: fn.rpx(3);
            background-color: #f5f5f5;
          }

          /*定义滑块
 内阴影+圆角*/
          &::-webkit-scrollbar-thumb {
            border-radius: fn.rpx(3);
            -webkit-box-shadow: inset 0 0 fn.rpx(3) color.$base;
            background-color: color.$base;
          }

          .item-img:first-child {
            margin-left: 0;
          }

          .item-img {
            flex-shrink: 0;
            box-sizing: border-box;
            object-fit: cover;
            margin-left: fn.rpx(14);
            width: fn.rpx(147);
            height: fn.rpx(82);
            background: #000000;
            // opacity: 0.2;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
